
<template>
	<div class="mySupplier">
		<top></top>
		<div class="center">
			<left></left>
			<div class="right">
        <div class="where">当前位置：分销后台><router-link to="/mySupplier">我的供应商</router-link></div>
        <div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
				<div class="title"><span style="color: #77C9FF; margin-right: 20px; cursor: pointer;" @click="tiaozhuan">< 返回抓单管理</span>店铺授权操作</div>
				<!-- <div class="add"><el-button type="danger" @click="log = true">添加供应商</el-button></div> -->
				<div class="con" style="padding: 20px; 0">
            <div class="flex">
              <div class="f1">店铺绑定的应用名称:</div>
              <div class="f2"><el-input v-model="name" placeholder="请输入内容"></el-input></div>
            </div>
            <div class="flex">
              <div class="f1">clientID:</div>
              <div class="f2"><el-input v-model.trim="clientID" placeholder="请输入内容"></el-input></div>
              <div class="f2" style="color: #999; margin-left: 20px;">获取方法见下方图提示</div>
            </div>
            <div class="flex">
              <div class="f1">client_secret:</div>
              <div class="f2"><el-input v-model.trim="client_secret" placeholder="请输入内容"></el-input></div>
            </div>

            <div class="flex" style="align-items: flex-start;">
              <div class="f1" style="padding-top: 7px;">前往应用填写回调地址:</div>
              <div class="f2">
                <div class="flex" style="margin-bottom: 0;">
                  <el-button type="text" size="medium"v-if="clientID == ''">填写clientID后复制回调地址</el-button>
                  <div style="margin: 0 10px;" v-if="clientID != ''">https://91haoka.cn/api/store/business/{{clientID}}/notify</div>
                  <el-button type="text" size="medium"  v-if="clientID != ''" @click="copy('https://91haoka.cn/api/store/business/'+clientID+'/notify')">复制地址</el-button>
                </div>
                <img src="../../../static/img/pddzhua1.png" style="max-width: 800px; margin-top: 20px;" />

              </div>
            </div>
            <div class="flex" style="align-items: flex-start;">
              <div class="f1"  style="padding-top: 10px;">填写授权码:</div>
              <div class="f2">
                <div class="flex" style="margin-bottom: 0;">
                  <el-button type="text" size="medium"  v-if="clientID == ''" >1、填写完上方信息后复制地址</el-button>
                  <el-button type="text" size="medium"  v-if="clientID != ''" @click="copy('https://fuwu.pinduoduo.com/service-market/auth?response_type=code&client_id='+clientID+'&redirect_uri=https://91haoka.cn/api/store/business/'+clientID+'/notify&state=111111')">1、点我复制授权码链接</el-button>
                </div>
                <div>https://fuwu.pinduoduo.com/service-market/auth?response_type=code&client_id='+clientID+'&redirect_uri=https://91haoka.cn/api/store/business/'+clientID+'/notify&state=111111</div>
                <div style="margin-top: 20px;">2、复制地址在浏览器打开，登录店铺账号后复制生成的授权码</div>
                <div style="width: 800px; margin: 20px 0; color: #DD2727;">注：请确保在浏览器退出拼多多店铺的登录后操作，或者在浏览器按ctrl+shift+n打开无痕模式粘贴地址前往 （请使用以下浏览器：谷歌Chrome、360系列、搜狗、微软Edge浏览器）</div>
                <div><img src="../../../static/img/pddzhua2.png" style="max-width: 800px; margin-top: 20px;" /></div>
                <div class="flex">
                  <div>3、填写授权码：</div>
                  <div class="f2"><el-input v-model.trim="code" placeholder="请输入内容"></el-input></div>
                </div>

              </div>
            </div>
            <div style="justify-content: center; display: flex; padding: 20px;"><el-button type="primary" @click="queren">确认配置</el-button></div>


				</div>
			</div>
		</div>

		<foot></foot>
    <notice></notice>
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
  import notice from '@/components/notice.vue'
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot,
      "notice": notice
		},
		name: 'mySupplier',
		data(){
			return{
        name:"",
        clientID:"",
        client_secret:"",
        code:"",
				msg:"hello",
				loading:true,
				log:false,
				disid:"",
				result:"",
				list:"",
				total:0,
				pagesize:20,
				page:1,
        input:""
			}
		},
		created() {

		},
		methods:{
      queren:function(){
        var that = this;
        axios.get('/api/plan-market/shop/pdd-open/set?client_name='+this.name+'&code='+this.code+'&client_id='+this.clientID+'&secret='+this.client_secret+'&id='+this.$route.query.id)
        	.then(response => {
        		if(response.data.msg.code == 0){
        			this.$message.success('配置完成');
              this.$router.go(-1)
        		}else{
        			this.$message.error(response.data.msg.info);
        		}
        	})
      },
      //点击复制
      copy:function(e,){
      				const input = document.createElement('input');
      				document.body.appendChild(input);
      				input.setAttribute('value', e);
      				input.select();
      				if (document.execCommand('copy')) {
      					document.execCommand('copy');
      					this.$message({
      					  message: '复制成功',
      					  type: 'success'
      					});
      				}
      				document.body.removeChild(input);
      },

			//跳转
			tiaozhuan:function(id){
				this.$router.go(-1)
			}

		}
	}
</script>

<style lang="scss" >
	.mySupplier{
		margin: 0; padding: 0; background: #EFEFEF;
		.center{
			width: 1366px; margin: 0 auto; display: flex; justify-content: space-between;
			.right{
				flex-basis: 1166px; background: #FFF;
				.title{border-bottom: 1px #EAEAEA solid; line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272}
				.add{ padding: 20px 30px}
        .flex{ display: flex; justify-items: center; align-items:center; margin-bottom: 10px;}
        .f1{ flex-basis: 200px; text-align: right; margin-right: 20px; color: #666666;}
        .f2{ color:#999;}
				.list{
					display: flex; text-align: center; color: #727272; line-height: 45px; margin: 0 20px; border: 1px #EAEAEA solid; margin-top: -1px;
					.th{ flex: 1; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid;  }
					.td{ flex: 1; font-size: 14px; border-right:1px #EAEAEA solid; }
				}
				.el-pagination{ text-align: right; margin: 20px 0}
			}
		}
		.result{ margin-top: 20px;}
	}
</style>
